<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> 下拉列表的 增删 </h1>
    <select id="mypro">
        <option>湖南</option>
        <option>广西</option>
        <option>福建</option>
    </select>
    <select id="mysel">
        <option>长沙</option>
        <option>桂林</option>
        <option>深圳</option>
    </select>
    <button onclick="addop()"> 增 </button>
    <button onclick="delop()"> 删 </button>
    <button onclick="getop()"> 取值 </button>

 <script>
    var sel =  document.querySelector('#mysel');

    function getop(){
        let c =  sel.value ; // 你选中的
        console.log( c );
    }

    function delop(){
    //    let i = sel.selectedIndex;  // 你选择
    //    sel.remove( i )
         sel.options.length = 0 ;   //删所有
         console.log(  sel.options );
    }

    function addop(){
        var op = document.createElement('option');
        op.innerHTML = '南宁';
        //sel.appendChild( op );
        sel.add( op );
    }
    
 </script>


    
    <div> 
        大哥
        <ul>
            <li>压缩</li>
            <li id="tm">temo</li>
            <li>寡妇</li>
            <li>龙龟</li>
        </ul>
    </div>
    <div> 二哥 </div>

    <table onclick="mysel()" border="1" width="400">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td><button onclick="mydel(this)">删-</button></td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td id="dian">6</td>
            <td><button onclick="mydel(this)">删-</button></td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td><button onclick="mydel(this)">删-</button></td>
        </tr>
    </table>
    表格有多少行？
    6这个格子上方是几？？
    循环表格所有格子，打印格子的值
    在某行单击 ，本行背景 变色
    <p>
        <button onclick="myadd()"> 增 + </button>
        <button onclick="mydel()"> 删 - </button>
    </p>
</body>
<script>
var tb =  document.querySelector('table');
let sc = 0;  //上次点了谁？
function mysel(){
    var obj = event.srcElement; 
    if( obj.tagName == 'TD'){
        //上次点了变白色
        tb.rows[sc].bgColor = 'white';
        let tr =  obj.parentNode;  // 找父节点
        sc = tr.rowIndex;  // 行下标
        tr.bgColor = 'yellow'; 
        console.log( obj );
    }
}


function myadd(){
   let row = tb.insertRow(2);  // 在哪？ 表格最后
   let g1 =  row.insertCell();
   let g2 =  row.insertCell();
   let g3 =  row.insertCell();
   g1.innerText = '狗头';
   g2.innerText = '武器';
   g3.innerText = '赵信';
}

function mydel( obj ){
    //tb.deleteRow(-1);  // 删了谁？？
    let tr = obj.parentNode.parentNode;
    let i = tr.rowIndex;   //本行下标
    tb.deleteRow( i );
}


// var td =  document.querySelector('#dian')
// var tr = td.parentNode ;
// console.log( '所有行数组', tb.rows );
// console.log( '行', tb.rows.length );
// console.log( td );
// console.log( '列', td.cellIndex );
// console.log( '行' , tr.rowIndex );
// console.log('本行的所有td', tr.cells );

// let i = tr.rowIndex ;  //行下标
// let j = td.cellIndex;  //列下标
// let obj =  tb.rows[2].cells[0];
// console.log('找到=', obj );



// var tb =  document.querySelector('table');
// var tbody =  tb.firstElementChild; 
// var trs = tbody.children ;  // 孩子们
// console.log( trs.length );
// var td =  document.querySelector('#dian')
// console.log( td );
// console.log(  td.parentNode.nextElementSibling.lastElementChild  );

// var li  = document.querySelector('#tm');
// console.log( li );
// var ul  = li.parentNode ;  //父节点
// console.log( ul );
// var cs =  ul.children;   //所有孩子节点
// console.log( cs );
// console.log( '长度=', cs.length );
// console.log( '第一个孩子',  ul.firstElementChild );
// console.log('最后孩子' , ul.lastElementChild  );
// console.log( '第二个', cs[1]);
// console.log('第二个', li.nextElementSibling );
// console.log('上一个兄弟', li.previousElementSibling  );
</script>

</html>